<template>
	<div class="kaoguanguanli">
    <top></top>
    <div class="flexcc">
      <img src="../../../static/img2/banner2.png">
    </div>
    <div class="ww" style="padding: 20px 0 50px;">
      <div style="margin-bottom: 30px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>下载中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="flex" style="gap:20px;">
        <div style="border: 1px #eaeaea solid; padding: 10px; border-radius: 5px; margin-bottom: 20px; background: #fff;" v-for="item in tableData" :key="item.id">
          <div  style="width: 200px; height: 200px; background: #eaeaea; overflow: hidden;"><img :src="item.img_url"></div>
          <div style="margin-top: 10px; font-size: 13px;">{{item.title}}</div>
          <div style="margin-top: 10px; font-size: 12px; color: #999;">{{item.desc}}</div>
          <div style="margin-top: 10px; font-size: 12px; color: #005AFF;  cursor: pointer; text-align: right;" @click="xiazai(item)">点击下载</div>
        </div>
      </div>

      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>
	</div>
</template>

<script>
  import top from '../top.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      top
    },
		data() {
			return {
        search:{
          page:1,
          page_size:20,
        },
        total:0,
        tableData:[],
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      xiazai:function(item){
        location.href = item.file_url
      },
      getlist:function(){
        axios.get(this.IP_URL+'/api/down/list',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{ width: 300px;}
</style>
